<template>
	<view class="chartsBox">
		<view class="chartsTitle">
			<h4>数据趋势</h4>
		</view>

		<up-subsection class="upSubsection" :list="subsectionList" :current="subsectionNow" mode="subsection"
			@change="subsectionChange"></up-subsection>

		<uni-data-select :clear="false" class="uniDataSelect" v-model="selectValue" :localdata="selectRange"
			@change="selectChange"></uni-data-select>

		<view class="maximumBox" v-if="haveData">
			<view class="maximumBoxItem">
				<view class="circular"></view><text>&nbsp;最高{{maxData}}</text>
			</view>
			<view class="maximumBoxItem">
				<view class="circular"></view><text>&nbsp;最低{{minData}}</text>
			</view>
		</view>


		<view class="chartsMain">

			<view class="charts-box" v-if="haveData">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" ref="chartRef" />
			</view>
			<view class="noData" v-else>
				<image src="/static/imgs/data/noData.png"></image>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		cemBusinessBudgetGetYears,
		phoneStaGetPartnerDataTrend
	} from '../../../utils/data';

	import {
		onShow
	} from '@dcloudio/uni-app'

	//图表有数据
	let haveData = ref(false)



	//====================选项卡（也叫 分段器）========================//
	const subsectionList = ref(['分润金额', '业绩金额', '成交单数']);
	const subsectionNow = ref(0);

	// 选项卡发生改变时触发 
	let subsectionChange = (index) => {
		subsectionNow.value = index;

		//判断有无数据
		if (subsectionNow.value == 0 && profitArray.value.length == 0) {
			haveData.value = false
		} else if (subsectionNow.value == 1 && achievementArray.value.length == 0) {
			haveData.value = false
		} else if (subsectionNow.value == 2 && quantityArray.value.length == 0) {
			haveData.value = false
		} else {
			haveData.value = true
		}

		//判断最大值最小值
		if (subsectionNow.value == 0) {
			maxData.value = profitMax.value
			minData.value = profitMin.value
		} else if (subsectionNow.value == 1) {
			maxData.value = achievementMax.value
			minData.value = achievementMin.value
		} else if (subsectionNow.value == 2) {
			maxData.value = quantityMax.value
			minData.value = quantityMin.value
		}

		let result = {
			categories: xAxisArray.value,
			series: [{
					name: subsectionNow.value == 0 ? '分润金额' : (subsectionNow.value == 1 ?
						'业绩金额' : '成交单数'),
					data: subsectionNow.value == 0 ? profitArray.value : (subsectionNow.value == 1 ?
						achievementArray.value : quantityArray.value)
				},

			]
		};

		chartData.value = JSON.parse(JSON.stringify(result));
	}

	//====================下拉框========================//

	let selectValue = ref(2025)
	let selectRange = ref([{
			value: 2025,
			text: "2025"
		},
		{
			value: 2024,
			text: "2024"
		},
		{
			value: 2023,
			text: "2023"
		},
	])

	let selectChange = (e) => {
		getServerData()
	}


	let getYears = () => {
		//获取登录账号的businessId
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		let businessId = userinfo.businessId

		cemBusinessBudgetGetYears('/cemBusinessBudget/getYears', {
			businessId: businessId
		}).then((res) => {
			if (res.code == 200) {
				selectRange.value = []
				for (var i = 0; i < res.data.length; i++) {
					selectRange.value.push({
						value: res.data[i],
						text: res.data[i],
					})

				}
				if (selectRange.value.length > 0) {

					// 创建一个表示当前时间的Date对象
					const currentDate = new Date();
					// 获取当前年份（四位数）
					const currentYear = currentDate.getFullYear();

					selectValue.value = currentYear
				} else {
					selectValue.value = ''
				}

			}
		})
	}
	getYears()





	// =============================获取图表实例============================//
	const chartRef = ref(null)

	let chartData = ref({
		categories: [],
		series: []
	});

	let opts = reactive({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		fontSize: 9,
		fontColor: "#666666",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		legend: {
			show: false,
			position: "bottom",
			float: "center",
			padding: 5,
			margin: 5,
			backgroundColor: "rgba(0,0,0,0)",
			borderColor: "rgba(0,0,0,0)",
			borderWidth: 0,
			fontSize: 13,
			fontColor: "#666666",
			lineHeight: 11,
			hiddenColor: "#CECECE",
			itemGap: 10
		},
		xAxis: {
			disableGrid: true,
			disabled: false,
			axisLine: true,
			axisLineColor: "#CCCCCC",
			calibration: false,
			fontColor: "#666666",
			fontSize: 9,
			lineHeight: 20,
			marginTop: 5,
			rotateLabel: true,
			rotateAngle: 45,
			itemCount: 5,
			boundaryGap: "center",
			splitNumber: 5,
			gridColor: "#CCCCCC",
			gridType: "solid",
			dashLength: 4,
			gridEval: 1,
			scrollShow: false,
			scrollAlign: "left",
			scrollColor: "#A6A6A6",
			scrollBackgroundColor: "#EFEBEF",
			title: "",
			titleFontSize: 13,
			titleOffsetY: 0,
			titleOffsetX: 0,
			titleFontColor: "#666666",
			format: ""
		},
		yAxis: {
			data: [{
				min: 0,
				axisLine: false
			}],
			disabled: false,
			disableGrid: false,
			splitNumber: 5,
			gridType: "solid",
			dashLength: 8,
			gridColor: "#CCCCCC",
			padding: 10,
			showTitle: false
		},
		extra: {
			column: {
				type: "group",
				width: 12,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				seriesGap: 2,
				categoryGap: 3,
				barBorderCircle: false,
				linearType: "none",
				linearOpacity: 1,
				colorStop: 0,
				meterBorder: 1,
				meterFillColor: "#FFFFFF",
				labelPosition: "outside"
			},
			tooltip: {
				showBox: true,
				showArrow: true,
				showCategory: false,
				borderWidth: 0,
				borderRadius: 0,
				borderColor: "#000000",
				borderOpacity: 0.7,
				bgColor: "#000000",
				bgOpacity: 0.7,
				gridType: "solid",
				dashLength: 4,
				gridColor: "#CCCCCC",
				boxPadding: 3,
				fontSize: 13,
				lineHeight: 20,
				fontColor: "#FFFFFF",
				legendShow: true,
				legendShape: "auto",
				splitLine: true,
				horizentalLine: false,
				xAxisLabel: false,
				yAxisLabel: false,
				labelBgColor: "#FFFFFF",
				labelBgOpacity: 0.7,
				labelFontColor: "#666666"
			},
			markLine: {
				type: "solid",
				dashLength: 4,
				data: []
			}
		}
	})

	let xAxisArray = ref([])
	let quantityArray = ref([])
	let profitArray = ref([])
	let achievementArray = ref([])


	//最大值最小值显示
	let maxData = ref(0)
	let minData = ref(0)

	//三个类型的 最高最低
	let profitMax = ref(0)
	let profitMin = ref(0)
	let achievementMax = ref(0)
	let achievementMin = ref(0)
	let quantityMax = ref(0)
	let quantityMin = ref(0)

	let getServerData = () => {

		phoneStaGetPartnerDataTrend('/phoneSta/getPartnerDataTrend', {
			year: selectValue.value,
		}).then((res) => {
			if (res.code == 200) {
				xAxisArray.value = [];
				quantityArray.value = [];
				profitArray.value = [];
				achievementArray.value = [];
				for (var i = 0; i < res.data.length; i++) {
					xAxisArray.value.push(res.data[i].month)
					quantityArray.value.push(res.data[i].quantity)
					profitArray.value.push(res.data[i].profit)
					achievementArray.value.push(res.data[i].achievement)
				}

				//=============================判断有无数据===========================//
				if (subsectionNow.value == 0 && profitArray.value.length == 0) {
					haveData.value = false
				} else if (subsectionNow.value == 1 && achievementArray.value.length == 0) {
					haveData.value = false
				} else if (subsectionNow.value == 2 && quantityArray.value.length == 0) {
					haveData.value = false
				} else {
					haveData.value = true
				}

				//==========================三种类型最高最低赋值=========================//
				profitMax.value = profitArray.value[0]
				profitMin.value = profitArray.value[0]
				for (var i = 0; i < profitArray.value.length; i++) {
					if (profitMax.value < profitArray.value[i]) {
						profitMax.value = profitArray.value[i]
					}
					if (profitMin.value > profitArray.value[i]) {
						profitMin.value = profitArray.value[i]
					}
				}

				achievementMax.value = achievementArray.value[0]
				achievementMin.value = achievementArray.value[0]
				for (var i = 0; i < achievementArray.value.length; i++) {
					if (achievementMax.value < achievementArray.value[i]) {
						achievementMax.value = achievementArray.value[i]
					}
					if (achievementMin.value > achievementArray.value[i]) {
						achievementMin.value = achievementArray.value[i]
					}
				}

				quantityMax.value = quantityArray.value[0]
				quantityMin.value = quantityArray.value[0]
				for (var i = 0; i < quantityArray.value.length; i++) {
					if (quantityMax.value < quantityArray.value[i]) {
						quantityMax.value = quantityArray.value[i]
					}
					if (quantityMin.value > quantityArray.value[i]) {
						quantityMin.value = quantityArray.value[i]
					}
				}


				//======================判断最大值最小值========================//
				if (subsectionNow.value == 0) {
					maxData.value = profitMax.value
					minData.value = profitMin.value
				} else if (subsectionNow.value == 1) {
					maxData.value = achievementMax.value
					minData.value = achievementMin.value
				} else if (subsectionNow.value == 2) {
					maxData.value = quantityMax.value
					minData.value = quantityMin.value
				}




				let result = {
					categories: xAxisArray.value,
					series: [{
							name: subsectionNow.value == 0 ? '分润金额' : (subsectionNow.value == 1 ?
								'业绩金额' : '成交单数'),
							data: subsectionNow.value == 0 ? profitArray.value : (subsectionNow
								.value == 1 ? achievementArray.value : quantityArray.value)
						},

					]
				};
				chartData.value = JSON.parse(JSON.stringify(result));
			}
		})

	}

	// onMounted(() => {
	// 	getServerData()
	// })
	onShow(()=>{
		//选项卡 复原
		subsectionNow.value =0
		//年份复原
		// 创建一个表示当前时间的Date对象
		const currentDate = new Date();
		// 获取当前年份（四位数）
		const currentYear = currentDate.getFullYear();
		selectValue.value = currentYear
		//图表数据复原
		getServerData()
	})
</script>

<style scoped lang="scss">
	.chartsBox {
		width: 688rpx;
		// height: 515rpx;
		padding: 18rpx;
		background: white;
		margin: 14rpx 0;

		.chartsTitle {
			width: 100%;
			height: 46rpx;
			margin-bottom: 14rpx;
		}

		.upSubsection {
			margin-bottom: 14rpx;
		}

		.uniDataSelect {
			margin-bottom: 14rpx;
		}

		.maximumBox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 24rpx;

			.maximumBoxItem {
				display: flex;
				align-items: center;

				.circular {
					width: 15rpx;
					height: 15rpx;
					background-color: yellow;
					border-radius: 50%;
					background-color: #FF8F38;
				}
			}

		}

		.chartsMain {
			width: 100%;
			height: 366rpx;

			// background-color: #bfa;
			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				width: 100%;
				height: 100%;
			}

			.noData {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 400rpx;
					height: 100%;
				}
			}

		}
	}
</style>